<template>
	<view class="store">
		<!-- 导航栏 -->
		<navBar class="s_navBar" isBack backColor="#fff" background="transparent">
			<view class="s_nCenter" slot="center">
				<view class="s_nBg"><image :src=" storeInfo.back_img"></image></view>
				<view class="s_nInput">
					<view class="s_nIcon iconfont icon-search"></view>
					<input confirm-type="search" type="text" v-model="keyword" @confirm="searchData" placeholder="搜索店内商品" placeholder-style="color: rgba(255, 255, 255, .8);" />
				</view>
			</view>
		</navBar>
		
		<view class="s_container">
			<!-- 店铺信息 -->
			<view class="s_store">
				<view class="s_sShop">
					<view class="s_sLogo"><image :src=" storeInfo.store_logo"></image></view>
					<view class="s_sCan">
						<view class="s_sName">{{storeInfo.store_name}}</view>
						<view class="s_sIt">
							<view class="s_siItem" v-if="storeInfo.business_start">
								<view class="s_siIcon icon1"><image src="/static/mall/time.png"></image></view>
								<view class="s_siTxt">{{storeInfo.business_start + '-' + storeInfo.business_end}}</view>
							</view>
							<view class="s_siItem" v-if="storeInfo.is_carry">
								<view class="s_siIcon icon2"><image src="/static/mall/cart.png"></image></view>
								<view class="s_siTxt">支持配送</view>
							</view>
						</view>
						<view class="s_sFocus">
							<view class="s_sfBtn" :class="{'active': storeInfo.user_follow_status == 1}" @tap="focusStore">{{storeInfo.user_follow_status == 1 ? '已关注' : '+ 关注'}}</view>
							<view class="s_sfTxt" v-if="storeInfo.fans_num!=null">{{storeInfo.fans_num}}粉丝</view>
							<view class="s_sfTxt" v-if="storeInfo.fans_num==null">0粉丝</view>
						</view>
					</view>
				</view>
				<view class="s_sRemark">
					<view class="s_srText omit-2">{{storeInfo.store_detail}}</view>
				</view>
			</view>
			
			<!-- 内容 -->
			<view class="s_content">
				<!-- tab栏 -->
<!-- 				<view class="s_cTabs">
					<view class="s_ctItem active">商品</view>
					<view class="s_ctItem">探店</view>
					<view class="s_ctCursor"></view>
				</view> -->
				<!-- 商品/探店 swiper -->
				<view class="s_cCan">
					<swiper class="s_cSwiper">
						<!-- 商品 -->
						<swiper-item class="s_cSwiper-item">
							<view class="s_goods">
								<view class="s_gClass">
									<scroll-view class="s_gcList hide-scroll" scroll-y>
										<view class="s_gcContain">
											<view class="s_gcItem" :class="{'active': item.cate_id == navId}" v-for="item in navList" @tap="toggleNav(item.cate_id, item.cate_name)">
												<view class="s_gcTxt">{{item.cate_name}}</view>
											</view>
										</view>
									</scroll-view>
								</view>
								<view class="s_gGood">
									<scroll-view class="s_ggList" scroll-y @scrolltolower.stop="onBottom">
										<view class="s_ggContain">
											<view class="s_ggGroup">
												<view class="s_ggTit" v-if="goodsName">{{goodsName + '(' + total + ')'}}</view>
												<view class="s_ggItems">
													<view class="no-card" v-if="!goodsList.length">
														<image :src="`${baseImg}/static/adminShop/sm.png`"></image>
														<text>暂无商品信息~</text>
													</view>
													<view class="s_ggItem" v-else v-for="(item,index) in goodsList" :key="index">
														<view class="s_ggImage" v-if="item.main_imgurl" @click="toProduct(item.product_id)"><image :src=" item.main_imgurl" mode="widthFix"></image></view>
														<view class="s_ggImage" v-else><image src="../../../static/mall/notImg.jpg" mode="widthFix"></image></view>
														<view class="s_ggCan">
															<view class="s_ggName omit-2" @click="toProduct(item.product_id)">{{item.product_title}}</view>
															<view class="s_ggTip">{{item.volume}}人付款</view>
	<!-- 														<view class="s_ggCoupon">
																<view class="s_ggCoupon-item">秒杀7.8折</view>
																<view class="s_ggCoupon-item">满2000减800</view>
															</view> -->
															<view class="s_ggFee">￥<text>{{item.price}}</text></view>
															<!-- <view class="yprice" v-if="item.rate_price"><i>底价</i>￥<text>{{item.rate_price}}</text></view> -->
															<view class="s_ggCheap" v-if="item.primary_price>item.price">￥<text>{{item.primary_price}}</text></view>
															<view class="s_ggOper">
																<view class="s_color" @click="showSizePop(item)">选规格<i class="s_unm" v-if="getGoodsItemNum(item) > 0">{{getGoodsItemNum(item)}}</i></view>
																<!-- <view class="s_ggAdd" @tap="addCart(item.product_id)"><image src="/static/mall/icon_add.png"></image></view>
																<view class="s_ggNum" v-if="item.num > 0">{{item.num}}</view>
																<view class="s_ggMinus" v-if="item.num > 0"  @tap="minusCart(item.product_id)"><image src="/static/mall/icon_minus.png"></image></view> -->
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</swiper-item>
	
					</swiper>
				</view>
			</view>
		</view>
		
		<!-- 购物车 -->
		<view class="s_cart" v-if="cartShow">
			<view class="s_cBg" @tap="switchCart"></view>
			<view class="s_cBox">
				<view class="s_cTop">
					<view class="s_cTip"><text v-if="cart.sumCheapPrice">折扣已减{{cart.sumCheapPrice}}元</text></view>
					<view class="s_cClear" @click="closecart">清空清单</view>
				</view>
				<view class="s_cBtm">
					<template v-if="cart.list.length">
						<view class="s_cItem" v-for="(item, index) in cart.list" :key="item.id">
							<view class="s_cImage" v-if="item.main_imgurl"><image :src=" item.main_imgurl" mode="widthFix"></image></view>
							<view class="s_cImage" v-else><image src="../../../static/mall/notImg.jpg" mode="widthFix"></image></view>
							<view class="s_cCont">
								<view class="s_cName omit-2">{{item.product_title}}</view>
								<view class="s_cSpec omit-1"><span v-for="item1 in item.attribute">{{item1.value}}</span></view>
								<view class="s_cFee">￥<text>{{item.price}}</text></view>
								<!-- <view class="yprice" v-if="item.rate_price"><i>底价</i>￥<text>{{item.rate_price}}</text></view> -->
								<view class="s_ggCheap">￥<text>{{item.primary_price}}</text></view>
								
								<view class="s_cOper">
									<view class="s_cAdd" @tap="addCart_cart(item)"><image src="/static/mall/icon_add.png"></image></view>
									<view class="s_cNum">{{item.cart_num}}</view>
									<view class="s_cMinus" @tap="minusCart_cart(item)"><image src="/static/mall/icon_minus.png"></image></view>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="s_cNodata">清单中没有商品，快去添加一件吧</view>
					</template>
				</view>
			</view>
		</view>
		
		<!-- 提交订单栏 -->
		<view class="s_submit">
			<view class="s_sLeft" @tap="switchCart">
				<view class="s_sIcon">
					<image src="/static/mall/cart2.png" />
					<view class="s_sNum" v-if="num!=0">{{num}}</view>
				</view>
				<view class="s_sPrice">
					<view class="s_sTxt1">￥<text>{{price}}</text></view>
					<!-- <view class="yprice" style="margin-top: 0; margin-left: 20rpx;" v-if="initialPrice!=0"><i>底价</i>￥<text>{{initialPrice}}</text></view> -->
					<view class="s_sPprice" v-if="initialPrice!=0">￥{{initialPrice}}</view>
					<!-- <view class="s_sTxt2" v-if="cart.initialPrice">￥<text>{{cart.initialPrice}}</text></view> -->
				</view>
			</view>
			<!-- <view class="s_sRight" @tap="toCartList">查看清单</view> -->
		</view>
		
		<!-- 弹窗 - 取消关注 -->
	<!-- 	<view class="s_popFocus" :class="{'active': popFocus}">
			<view class="s_pBg" @click="popFocus = false"></view>
			<view class="s_pBox popIn">
				<view class="s_pTitle">确定不再关注Ta？</view>
				<view class="s_pBtns">
					<view class="s_pClose" @click="popFocus = false">取消</view>
					<view class="s_pConfim" @click="focusStore({ isS})">确认</view>
				</view>
			</view>
		</view> -->
		
		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop"><view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view></view>
					<view class="S_bInfo">
						<view class="S_biHead"><image :src="cartdata.main_imgurl" mode="aspectFit"></image></view>
						<view class="S_biCan">
							<view class="S_biFee">¥<text>{{cartdata.price}}</text></view>
							<!-- <view class="S_biTip"><view class="yprice" style="margin-top: 0;" v-if="cartdata.rate_price"><i>底价</i>￥<text>{{cartdata.rate_price}}</text></view></view> -->
							<view class="S_bPprice">￥<text>{{cartdata.primary_price}}</text></view>
							<!-- <view class="S_biRemark">编号：1000320203</view> -->
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="S_bcGroup" v-for="(items,index1) in cartdata.parameter">
								<view class="S_bcTit">{{items.specifs}}</view>
								<view class="S_bcChecks">
									<view class="S_bcCheck" v-for="(item,index2) in items.child" @click="checkedEvent(item,index1)" :class="{'checked':item.checked}">{{item.specif}}</view>
								</view>
							</view>
							<view class="S_bcGroup">
								<view class="S_bcTit">数量</view>
								<view class="S_bcNums">
									<view class="S_bcMinus" @click="minusSizeCart"></view>
									<view class="S_bcNum">{{sizeNum}}</view>
									<view class="S_bcAdd" @click="addSizeCart"></view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="S_bBtns">
						<view class="S_bbBtn1" @click="addCart" style="width: 100%;">加入清单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import service_mall from '@/service/mall.js'

export default {
	components: { navBar },
	
	data() {
		return {
			baseImg:this.$static,
			ImageUrl: URL.IMAGE,
			// 店铺信息
			storeInfo: null,
			sizePop: false,
			// 商品分类数据
			navId: null,       // 当前所选中分类
			navList: null,
			// 商品数据
			goodsName: null,
			goodsList: null,
			// 购物车
			cartShow: false,
			cartId: 1,
			cart: {
				num: 0,
				price: 0,
				initialPrice: 0,
				sumCheapPrice: 0,
				list: []
			},
			// 关注
			popFocus: false,
			cartdata:'',
			sizeNum:1,
			goodsGetlist:[],
			type:'',
			keyword:'',
			total:0,
			page:1,
		}
	},
	
	onLoad(options) {
		console.log(options)
		// testCode 
		this.storeId = options.storeId
		let token = this.$store.state.index.token;
		if(token){
			this.getDetail()
			this.getGoodsNav()
			this.CartList()
		}
	},
	onShow() {
		this.CartList()
	},
	computed:{
		// 总数
		num(){
			let num = 0
			this.cart.list.forEach(item=>{
				num += item.cart_num
			})
			return num
		},
		
		// 总价
		price(){
			let price = 0
			this.cart.list.map(item=>{
				price += Number(item.price*item.cart_num)
			})
			return price.toFixed(2)
		},
		
		// // 总底原价
		initialPrice(){
			let initialPrice = 0;
			this.cart.list.forEach(item=>{
				if(item.primary_price){
					initialPrice += Number(item.primary_price*item.cart_num)
				}
			})
			return initialPrice.toFixed(2)
		}
		
	},
	onReachBottom() {
		// this.page++;
		// service_mall.store_getGoods({ store_id: this.storeId, cate_id: this.navId, page: this.page ,keyword:this.keyword})
		// .then(res => {
		// 	console.log(res)
		// 	if (res.code == 1) {
		// 		let goodsList = res.data.data
				
		// 		// 处理数据
		// 		goodsList.forEach(val => { 
		// 			val.num = 0 
		// 			val.volume = val.volume ? val.volume : 0
		// 		})
		// 		this.goodsList = this.goodsList.concat(goodsList)
		// 		this.total = res.data.count
		// 	}
		// })
	},
	methods: {
		getGoodsItemNum(data){
			if(this.cart.list.length<1){
				return 0
			}
			let num = 0;
			this.cart.list.map(item=>{
				if(item.product_id == data.product_id){
					num += item.cart_num
				}
			})
			return num
		},
		// 获取商家信息
		getDetail() {
			let storeId = this.storeId
			let user_id = this.$store.state.index.userId
			service_mall.store_getDetail({ store_id: storeId,user_id})
				.then(res => {
			console.log(res)
					if (res.code == 1) {
						let data = res.data
						this.storeInfo = data
					}
				})
				.catch(err => {
					
				})
		},
		
		// 弹窗-规格
		showSizePop(item) {
			this.cartdata = item
			console.log(item)
			this.sizeNum = 1
			this.sizePop = true
		},
		hideSizePop() {
			this.sizePop = false
		},
		// 添加数量
		addSizeCart() {
			console.log(this.cartdata)
			if(this.cartdata.specs_type == 1 && this.cartdata.sku_lst.length>0){//单
				this.sku_id = this.cartdata.sku_lst[0].sku_id
				this.cartdata.price = this.cartdata.sku_lst[0].price
				this.cartdata.primary_price = this.cartdata.sku_lst[0].primary_price
				this.cartdata.stockNum = this.cartdata.sku_lst[0].num
			}
			if(this.cartdata.specs_type == 2 && !this.sku_id){
				uni.showToast({
				    title: '请选择规格',
					icon: 'none',
				    duration: 2000
				});
				return
			}
			// 先判断库存是否足够
			if (this.cartdata.stockNum  <= this.sizeNum) {
				uni.showToast({ title: '库存不足', icon: 'none' })
				return
			}
			this.sizeNum++
		},
		
		// 删减清单-规格弹窗
		minusSizeCart() {
			if (this.sizeNum > 1) this.sizeNum--
		},
		//选择规格
		checkedEvent(data,index1){
			if(data.checked){
				this.$set(data,"checked",false)
			}else{
				this.cartdata.parameter[index1].child.map(item=>{
					this.$set(item,"checked",false)
				})
				this.$set(data,"checked",true)
				console.log(this.cartdata,"总数据--------")
				this.get_keys()
			}
		},
		get_keys(){
			let keys = [];
			this.cartdata.parameter.map((item1,index1)=>{
				let checkedItem = item1.child.find(r=>r.checked)
				if(checkedItem){
					keys.push({
						key:item1.specifs,
						value:checkedItem.specif
					})
				}
			})
			console.log(keys,4444444)
			this.keys = keys
			let sku_lst = this.cartdata.sku_lst
			for(let i = 0;i<sku_lst.length; i++){
					if(JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)){
						console.log(sku_lst)
						this.sku_id= sku_lst[i].sku_id
						this.cartdata.price = sku_lst[i].price
						this.cartdata.primary_price = sku_lst[i].primary_price
						this.cartdata.stockNum = sku_lst[i].num
					}
			}	
		},
		// 添加清单
		addCart() {
			// 先判断库存是否足够
			let token = this.$store.state.index.token;
			if(!token){
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index',
				});
			}
			if (this.sizeNum > this.cartdata.stockNum) {
				uni.showToast({ title: '库存不足', icon: 'none' })
				return
			}
			if(this.cartdata.specs_type == 1 && this.cartdata.sku_lst.length>0){//单规格
				this.sku_id = this.cartdata.sku_lst[0].sku_id
				this.cartdata.price = this.cartdata.sku_lst[0].price
				this.cartdata.primary_price = this.cartdata.sku_lst[0].primary_price
				this.cartdata.stockNum = this.cartdata.sku_lst[0].num
			}
			if(this.cartdata.specs_type == 2 && !this.sku_id){
				uni.showToast({
				    title: '请选择规格',
					icon: 'none',
				    duration: 2000
				});
				return
			}
			
			// 判断已选择数量与当前选择数量之和是否大于库存
			this.CartList()
			let cartNum = null
			this.cart.list.find(item=>{
				if(item.sku_id == this.sku_id){
					cartNum = item.cart_num
				}
			})
			console.log(cartNum)
			let nowNum = Number(cartNum)+Number(this.sizeNum)
			if(nowNum>this.cartdata.stockNum){
				uni.showToast({ title: '库存不足', icon: 'none' })
				return
			}
			
			service_mall.goods_getadd({product_id:this.cartdata.product_id,sku_id:this.sku_id,num:this.sizeNum || 1})
				.then(res => {
					if (res.code == 1) {
					  uni.showToast({ title: "添加清单成功", icon: "success" })
					  this.CartList()
					  this.sizePop = false
					  // this.sku_id = ''
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
			})	
		},
		// 查看店铺清单
		CartList() {
			service_mall.goods_CartList({store_id:this.storeId})
				.then(res => {
					if (res.code == 1) {
						let cartdata = res.data.data
						// let cart_num = 0,price=0,initialPrice=0; //rate_price
						// cartdata.map(item=>{
						// 	cart_num = this.$utils.accAdd(cart_num, item.cart_num);
						// 	price = this.$utils.accAdd(price, this.$utils.accMul(item.cart_num ,item.price));
						// 	initialPrice = this.$utils.accAdd(initialPrice, this.$utils.accMul(item.cart_num ,item.rate_price));
					 //    })
					  this.cart.list = cartdata ;
					  console.log(this.cart.list,666)
					  // console.log(cartdata)
					  // console.log(res.data.data)
					  // console.log(this.cart.list)
					  // this.cart.num = cart_num
					  // this.cart.price = price
					  // this.cart.initialPrice = initialPrice
					  // let totalPrice = 0;
					  // for(let i=0;i<res.data.length;i++){
						 //  if(res.data[i].price){
							//   totalPrice += Number(res.data[i].price)
						 //  }
					  // }
					  // this.cart.price = totalPrice;
					}
			})	
		},
		
		// 获取商品分类
		getGoodsNav() {
			service_mall.store_getGoodsNav({ store_id: this.storeId })
				.then(res => {
					if (res.code == 1) {
						let navList = res.data
						let firstId = navList[0].cate_id
						let firstName = navList[0].cate_name
						
						this.navList = navList
						this.navId = firstId
						this.getGoods(firstId, firstName)
					}
				})
				.catch(err => {
					
				})
		},
		searchData(){
			this.getGoods()
		},
		
		// 获取商品数据
		getGoods(navId, navName, callback) {
			let user_id = this.$store.state.index.userId
			service_mall.store_getGoods({ store_id: this.storeId, cate_id: this.navId, page: this.page ,keyword:this.keyword,user_id})
				.then(res => {
					console.log(res,"商品数据")
					if (res.code == 1) {
						let goodsList = res.data.data
						
						// 处理数据
						goodsList.forEach(val => { 
							val.num = 0 
							val.volume = val.volume ? val.volume : 0
						})
						
						this.goodsName = navName
						this.goodsList = goodsList
						this.total = res.data.count
						if (typeof callback === 'function') callback()
					}
				})
				.catch(err => {
					
				})
		},
		// 上拉加载
		onBottom(e){
			console.log(e)
			this.page++
			let user_id = this.$store.state.index.userId
			uni.showLoading({
				title:'加载中...'
			})
			service_mall.store_getGoods({ store_id: this.storeId, cate_id: this.navId, page: this.page ,keyword:this.keyword,user_id})
				.then(res => {
					console.log(res)
					if (res.code == 1) {
						if(!res.data.data.length){
							uni.showToast({
								title:'没有更多了',
								icon:'none'
							})
						}
						let goodsList = res.data.data
						// 处理数据
						goodsList.forEach(val => { 
							val.num = 0 
							val.volume = val.volume ? val.volume : 0
						})
						this.goodsList = this.goodsList.concat(goodsList)
						setTimeout(function(){
							uni.hideLoading()
						},500)
					}
				})
		},
		
		// 切换商品分类
		toggleNav(navId, navName) {
			this.page = 1
			if (this.navId != navId) {
				this.navId = navId
				this.getGoods(navId, navName, () => {
					let cartList = this.cart.list
					let goodsList = this.goodsList
					
					for (let i = 0; i < cartList.length; i++) {
						for (let j = 0; j < goodsList.length; j++) {
							if (cartList[i].product_id == goodsList[j].product_id) {
								goodsList[j].num++
							}
						}
					}
				})
			}
		},
		
		// 添加购物车-购物车
		addCart_cart(item) {
			console.log(item)
			if(item.num<=item.cart_num){
				uni.showToast({ title: '库存不足', icon: 'none' })
				return
			}
			service_mall.goods_getadd({
				// id:item.id,
				product_id:item.product_id,
				sku_id:item.sku_id,
				num:1
			}).then(res=>{
				if(res.code==1){
					this.CartList()
				}
			})
		},
		//清空购物车
		closecart(){
			uni.showModal({
			    title: '提示',
			    content: '确认清空清单?',
			    success:  (res) => {
			        if (res.confirm) {
						service_mall.goods_clear({
							store_id:this.storeId,
						}).then(res=>{
							if(res.code==1){
								this.CartList()
							}
						})
			        } else if (res.cancel) {
						
			        }
			    }
			});
			
		},
		// 删减购物车-购物车
		minusCart_cart(item) {
			if(item.cart_num>1){
				console.log(item.cart_num)
				service_mall.goods_setDec({
					id:item.id,
					num:1
				}).then(res=>{
					if(res.code==1){
						this.CartList()
					}
				})
			}else{
				uni.showModal({
				    title: '提示',
				    content: '确认删除该项?',
				    success:  (res) => {
				        if (res.confirm) {
							service_mall.goods_del({
								id:item.id,
							}).then(res=>{
								if(res.code==1){
									console.log(1111)
									this.CartList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
				        } else if (res.cancel) {
							
				        }
				    }
				});
			}
		},
		
		// 展示or隐藏购物车
		switchCart() { this.cartShow = !this.cartShow ;console.log(this.cart.list)},
		
		// 关注or取消关注店铺
		focusStore({ isSure = false } = {}) {
			let follow = this.storeInfo.user_follow_status	
			// 已关注 => 取消关注
			if (follow == 0) {
				this.type = 1
				}else{
				this.type = 2	
			}
			service_mall.store_follow({ store_id: this.storeId, type:this.type })
				.then(res => {
					if (res.code == 1) {
						this.storeInfo.user_follow_status = this.type == 1 
						this.storeInfo.fans_num += this.type == 1 ? 1 : -1
					}
					else {
						this.$utils.showErr({ title: res.msg })
					}
				})
			this.popFocus = false	
		},
		
		toProduct(e){
			uni.navigateTo({ url:`/pages/mall/goods/goods?id=${e}` })
		},
		//跳转查看清单
		toCartList(){
			let token = this.$store.state.index.token;
			if(!token){
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index',
				});
			}else{
				let router = this.$store.state.index.page?this.$store.state.index.page.ability:[]
				console.log(router,'、、、、、')
				if(router.findIndex(item=>item.route == 'guideIndex')!=-1){
					uni.navigateTo({
						url: "/pagesGuide/shopGuide/guideList/generList"
					})
				}else{
					uni.showToast({
						title:'没有权限',
						icon:'none'
					})
				}
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.store {height: 100vh;display: flex;flex-flow: column;
	.s_container {position: relative;z-index: 11;display: flex;flex-flow: column;flex: 1;}
	// 导航栏
	.s_navBar {position: relative;z-index: 10;
		.s_nCenter {width: 100%;}
		.s_nBg {width: 100vw;height: 474rpx;background: #ccc;position: fixed;top: 0;left: 0;z-index: -1;filter: blur(1px);}
		.s_nInput {width: 400rpx;height: 62rpx;padding: 0 64rpx;border: 1px solid #fff;border-radius: 36rpx;background: rgba(255, 255, 255, .23);position: relative;
			& > input {height: 100%;font-size: 24rpx;}
		}
		.s_nIcon {width: 28rpx;height: 28rpx;line-height: 28rpx;color: #fff;font-size: 28rpx;position: absolute;top: 50%;left: 28rpx;margin-top: -14rpx;}
	}
	// 店铺信息
	.s_store {
		.s_sShop {padding: 36rpx 0 24rpx;
			.s_sLogo {width: 104rpx;height: 104rpx;margin: 0 14rpx 0 32rpx;border-radius: 8rpx;box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, .08);float: left;}
			.s_sCan {padding-top: 10rpx;overflow: hidden;}
			.s_sName {height: 50rpx;line-height: 50rpx;color: #fff;font-size: 36rpx;font-weight: bold;text-overflow: ellipsis; white-space: nowrap;overflow: hidden; width: 70%;}
			.s_sIt {display: flex;
				.s_siItem {height: 34rpx;line-height: 34rpx;color: #fff;font-size: 24rpx;padding-left: 34rpx;margin-right: 32rpx;position: relative;}
				.s_siIcon {position: absolute;top: 50%;left: 0;transform: translateY(-50%);
					&.icon1 {width: 23rpx;height: 23rpx;}
					&.icon2 {width: 27rpx;height: 22rpx;}
				}
			}
			.s_sFocus {position: absolute;top: 40rpx;right: 32rpx;
				.s_sfBtn {width: 136rpx;height: 48rpx;line-height: 48rpx;text-align: center;color: #fff;font-size: 24rpx;border-radius: 24rpx;background: #e1c59d;
					&.active {color: #939393;background: #f6f7fb;}
				}
				.s_sfTxt {width: 136rpx;height: 28rpx;line-height: 28rpx;text-align: center;color: #fff;font-size: 20rpx;margin-top: 12rpx;}
			}
		}
		.s_sRemark {line-height: 36rpx;color: #fff;font-size: 24rpx;padding: 0 32rpx 20rpx;}
	}
	// 内容
	.s_content {border-radius: 24rpx 24rpx 0 0;background: #fff;overflow: hidden;display: flex;flex-flow: column;flex: 1;
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
	}
	// tab栏
	.s_cTabs {height: 100rpx;position: relative;display: flex;
		&::after {content: "";width: 100%;height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 0;z-index: 2;}
		.s_ctItem {font-size: 32rpx;display: flex;justify-content: center;align-items: center;flex: 1;
			&.active {font-weight: bold;}
		}
		.s_ctCursor {width: 40rpx;height: 8rpx;border-radius: 4rpx 4rpx;background: #ffd425;position: absolute;bottom: 0;left: 0;z-index: 1;transform: translateX(166rpx);}
	}
	// 商品/探店 swiper
	.s_cCan {flex: 1;
		.s_cSwiper {width: 100%;hegiht: 100%;}
		.s_cSwiper-item {width: 100%;hegiht: 100%;}
	}
	// 商品
	.s_goods {width: 100%;height: 100%;position: relative;
		.s_gClass {width: 106rpx;height: 100%;padding-top: 8rpx;float: left;
			.s_gcList {height: 100%;border-radius: 0 10rpx 0 0;background: #f6f7fb;overflow: hidden;}
			.s_gcContain {padding-bottom: 120rpx;}
			.s_gcItem {min-height: 34rpx;line-height: 34rpx;color: #666;font-size: 24rpx;padding: 20rpx 28rpx;border-radius: 0 10rpx 10rpx 0;background: #f6f7fb;position: relative;z-index: 2;box-sizing: content-box;
				&.active {color: #000;background: #fff;z-index: 1;}
				&.active::after {content: "";width: 100%;height: 140%;background: #fff;position: absolute;top: -20%;left: 0;z-index: 1;}
			}
			.s_gcTxt {position: relative;z-index: 10;}
		}
		.s_gGood {height: 100%;overflow: hidden;
			.s_ggList {height: 100%;}
			.s_ggContain {padding-bottom: 100rpx;}
			.s_ggTit {height: 34rpx;line-height: 34rpx;color: #000;font-size: 24rpx;padding: 24rpx 0 24rpx 26rpx;background: #fff;position: sticky;top: 0;z-index: 2;box-sizing: content-box;}
			.s_ggItem {padding: 20rpx 24rpx 24rpx 28rpx;position: relative;overflow: auto;
				&::after {content: "";height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 4rpx;right: 0;transform: scaleY(.5);}
				&:nth-child(1) {padding-top: 0;}
				&:nth-last-child(1)::after {content: none;}
			}
			.s_ggImage {width: 180rpx;height: 180rpx;margin-right: 16rpx;border-radius: 4rpx;float: left;overflow: hidden;}
			.s_ggCan {overflow: hidden;}
			.s_ggName {min-height: 40rpx;line-height: 40rpx;}
			.s_ggTip {height: 34rpx;line-height: 34rpx;color: #666;font-size: 24rpx;margin-top: 8rpx;}
			.s_ggCoupon {overflow: hidden;}
			.s_ggCoupon-item {height: 30rpx;line-height: 30rpx;color: #e9423e;font-size: 20rpx;padding: 0 14rpx;margin: 8rpx 8rpx 0 0;border: 1px solid #e9423e;float: left;box-sizing: content-box;}
			.s_ggFee {height: 44rpx;line-height: 44rpx;color: #e9423e;font-size: 22rpx;
				& > text {font-size: 32rpx;}
			}
			// .s_ggPprice{text-decoration: line-through;}
			.s_ggCheap {height: 34rpx;line-height: 34rpx;text-decoration: line-through;color: #939393;font-size: 18rpx;
				& > text {font-size: 24rpx;}
			}
			.s_ggOper {position: absolute;bottom: 30rpx;right: 20rpx;display: flex;flex-direction: row-reverse;}
			.s_ggAdd, .s_ggMinus {width: 60rpx;height: 96rpx;display: flex;justify-content: center;align-items: center;
				& > image {width: 40rpx;height: 40rpx;}
			}
			.s_ggNum {min-width: 52rpx;height: 96rpx;line-height: 96rpx;text-align: center;font-size: 36rpx;}
			
			// 没有商品
			.no-card {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx 20rpx 0 0;
				padding-top: 100rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
	// 购物车
	.s_cart {
		font-family: PingFang SC; width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;z-index: 501;
		.s_cBg {width: 100%;height: 100%;background-color: rgba(0, 0, 0, .8);}
		.s_cBox {
			width: 100%;border-radius: 24rpx 24rpx 0 0;background: #fff;position: absolute;left: 0;bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			}
		.s_cTop {width: 100%;height: 52rpx;padding: 0 32rpx;border-radius: 24rpx 24rpx 0 0;background: #f9f6f3;box-sizing: border-box;display: flex;justify-content: space-between;}
		.s_cTip {height: 52rpx;line-height: 52rpx;color: #cbaf87;font-size: 20rpx;font-weight: bold;}
		.s_cClear {height: 52rpx;line-height: 52rpx;color: #333;font-size: 20rpx;font-weight: bold;}
		.s_cBtm {max-height: 944rpx;padding: 20rpx 0 120rpx;overflow-y: auto;
		.s_ggCheap{height: 34rpx;line-height: 34rpx;text-decoration: line-through;color: #939393;font-size: 18rpx;
				& > text {font-size: 24rpx;}}
		}
		.s_cItem {padding: 20rpx 32rpx 20rpx;position: relative;display: flex;
			&::after {content: "";height: 1px;background: #f8f6f3;position: absolute;bottom: 0;left: 32rpx;right: 0;transform: scaleY(.5);}
			&:nth-last-child(1)::after {content: none;}
		}
		.s_cImage {width: 162rpx;height: 162rpx;margin-right: 40rpx;border-radius: 4rpx;overflow: hidden;}
		.s_cName {width: 486rpx;line-height: 40rpx;color: #333;font-size: 28rpx;font-weight: bold;}
		.s_cFee {height: 40rpx;line-height: 40rpx;color: #e9423e;font-size: 22rpx;font-weight: bold;margin-top: 10rpx;
			& > text {font-size: 32rpx;}
		}
		.s_cSpec{width: 494rpx; span{color: #A0A0A0;font:400 22rpx/36rpx  ;}}
		.s_cCheap {height: 34rpx;line-height: 34rpx;text-decoration: line-through;color: #939393;font-size: 18rpx;
			& > text {font-size: 24rpx;}
		}
		.s_cOper {position: absolute;bottom: 0;right: 20rpx;display: flex;flex-direction: row-reverse;}
		.s_cAdd, .s_cMinus {width: 60rpx;height: 96rpx;display: flex;justify-content: center;align-items: center;
			& > image {width: 40rpx;height: 40rpx;}
		}
		.s_cNum {min-width: 52rpx;height: 96rpx;line-height: 96rpx;text-align: center;font-size: 36rpx;}
		.s_cNodata {width: 100%;height: 200rpx;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
	}
	// 提交订单栏
	.s_submit {
		height: calc(80rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
		height: calc(80rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		width: 710rpx;border-radius: 10rpx;background: #fff;position: fixed;left: 20rpx;bottom: 10rpx;z-index: 502;display: flex;justify-content: space-between;
		.s_sLeft {height: 80rpx;position: relative;display: flex;align-items: center;flex: 1;background: #333;}
		.s_sIcon {width: 84rpx;height: 106rpx;position: absolute;left: 24rpx;bottom: 0rpx;}
		.s_sNum {width: 32rpx;height: 32rpx;color: #fff;font-size: 16rpx;border-radius: 50%;background: #e9423e;position: absolute;right: -10rpx;top: -10rpx;display: flex;justify-content: center;align-items: center;}
		.s_sPrice {margin-left: 138rpx;display: flex;align-items: center;
			.s_sPprice{margin-left: 10rpx; height: 34rpx;line-height: 34rpx;text-decoration: line-through;color: #939393;font-size: 20rpx;}
		}
		.s_sTxt1 {line-height: 40rpx;font-size: 20rpx;color: #fff;padding-right: 4rpx;
			& > text {font-size: 28rpx;}
		}
		.s_sTxt2 {line-height: 34rpx;font-size: 16rpx;color: #939393;
			& > text {font-size: 20rpx;text-decoration: line-through;}
		}
		.s_sRight {width: 244rpx;height: 100%;color: #fff;background: #c3ab7c;border-radius: 0 10rpx 10rpx 0;			display: flex;justify-content: center;align-items: center;}
	}
	// 弹窗 - 取消关注
	.s_popFocus {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 10000;visibility: hidden;transition: visibility .3s;
		&.active {visibility: visible;
			.s_pBg {opacity: 1;}
			.s_pBox {animation: popFocusIn .3s;}
		}
		.s_pBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);transition: opacity .3s;opacity: 0;}
		.s_pBox {width: 500rpx;height: 240rpx;margin-top: -120rpx;margin-left: -250rpx;border-radius: 8rpx;background: #fff;position: absolute;top: 50%;left: 50%;animation: popFocusOut .3s;}
		.s_pTitle {height: 40rpx;line-height: 40rpx;text-align: center;font-weight: bold;margin-top: 60rpx;}
		.s_pBtns {margin: 40rpx 40rpx 0;}
		.s_pClose, .s_pConfim {width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;border-radius: 30rpx;background: #f6f7fb;float: left;
			&:active {opacity: .88;}
		}
		.s_pConfim {background: #ffd425;float: right;}
	}
	// 探店
	.s_dynamic {width: 100%;height: 100%;
		.s_dList {width: 100%;height: 100%;}
		.s_dItem {padding-top: 32rpx;position: relative;
			&::after {content: "";height: 1px;background: #f4f4f4;position: absolute;bottom: 0;left: 32rpx;right: 32rpx;transform: scaleY(.5);}
			&:nth-last-child(1)::after {content: none;}
		}
		.s_dTime {height: 34rpx;line-height: 34rpx;color: #939393;font-size: 24rpx;padding: 0 32rpx;}
		// 标签
		.s_dTags {margin: 18rpx 32rpx 0;overflow: hidden;}
		.s_dTag {height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 24rpx;padding: 0 20rpx 0 48rpx;border-radius: 22rpx;background: #f9f6f3;position: relative;float: left;}
		.s_dTag-icon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
		// 内容
		.s_dText {line-height: 44rpx;margin: 28rpx 36rpx 0;}
		.s_dAll {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 26rpx;margin-top: 8rpx;}
		.s_dImgs {padding: 18rpx 0 0 32rpx;overflow: hidden;}
		.s_dImg {width: 220rpx;height: 220rpx;margin: 12rpx 14rpx 0 0;border-radius: 4rpx;background: #f6f7fb;overflow: hidden;float: left;}
		// 底部功能键
		.s_dFuns {padding: 20rpx 32rpx 22rpx;display: flex;			}
		.s_dFun {height: 74rpx;display: flex;flex: 1;justify-content: center;align-items: center;
			&:nth-child(1) {justify-content: flex-start;}
			&:nth-last-child(1) {justify-content: flex-end;}
		}
		.s_dFIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;color: #6c6c6c;font-size: 40rpx;margin-right: 16rpx;display: inline-block;}
	}
	
}
// 弹窗-规格
.Size {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1001;
	.S_bg {width: 100%;height: 100%;background: rgba(0, 0, 0, .8);}
	.S_box {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;flex-flow: column;}
	.S_bCloak {height: 176rpx;}
	.S_bContain {border-radius: 24rpx 24rpx 0 0;background: #fff;position: relative;overflow: hidden;display: flex;flex-flow: column;flex: 1;}
	.S_bClose {width: 104rpx;height: 120rpx;position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;
		.S_bcIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;color: #000;font-size: 20rpx;border-radius: 50%;background: #f9f6f3;}
	}
	.S_bInfo {padding: 36rpx 32rpx 20rpx;
		.S_biHead {width: 178rpx;height: 178rpx;margin-right: 24rpx;border-radius: 10rpx;background: #f0f0f0;box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, .16);overflow: hidden;float: left;}
		.S_biCan {overflow: hidden;
		.S_bPprice{height: 34rpx;line-height: 34rpx;text-decoration: line-through;color: #939393;font-size: 18rpx;
			& > text {font-size: 24rpx;}}
		}
		.S_biFee {height: 60rpx;line-height: 60rpx;color: #e9423e;font-size: 32rpx;font-weight: bold;margin-top: 32rpx;
			& > text {font-size: 44rpx;}
		}
		.S_biTip {height: 40rpx;line-height: 40rpx;color: #e9423e;font-size: 20rpx;margin-top: 10rpx;border-radius: 4rpx;display: inline-block;
		  .yprice{margin-left: 0;}
		}
		.S_biRemark {height: 28rpx;line-height: 28rpx;color: #939393;font-size: 20rpx;margin-top: 10rpx;}
	}
	.S_bConfig {overflow: hidden;flex: 1;
		.S_bcCan {padding: 0 34rpx 146rpx;}
		.S_bcGroup {padding-top: 40rpx;position: relative;
			&:first-child {padding-top: 20rpx;}
		}
		.S_bcTit {height: 40rpx;line-height: 40rpx;font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
		.S_bcChecks {padding-top: 8rpx;}
		.S_bcCheck {height: 42rpx;line-height: 42rpx;color: #939393;font-size: 24rpx;padding: 0 26rpx;margin: 16rpx 16rpx 0 0;border-radius: 22rpx;background: #f5f5f5;display: inline-block;
			&.checked {color: #e9423e;background: #feeff2;}
		}
		.S_bcNums {height: 48rpx;position: absolute;top: 36rpx;right: -22rpx;display: flex;}
		.S_bcNum {width: 72rpx;height: 48rpx;line-height: 48rpx;text-align: center;border-radius: 8rpx;background: #f6f7fb;}
		.S_bcMinus, .S_bcAdd {width: 72rpx;height: 48rpx;position: relative;}
		.S_bcMinus::before, .S_bcAdd::before, .S_bcAdd::after {content: "";width: 24rpx;height: 4rpx;border-radius: 4rpx;background: #333;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
		.S_bcAdd::after {width: 4rpx;height: 24rpx;}
	}
	.S_bBtns {height: 86rpx;color: #fff;font-weight: bold;padding: 20rpx 48rpx 0;border-top: 1px solid #f8f6f3;background: #fff;position: absolute;bottom: 0;left: 0;right: 0;box-sizing: content-box;display: flex;justify-content: space-between;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
		.S_bbBtn1, .S_bbBtn2 {width: 294rpx;height: 72rpx;line-height: 72rpx;text-align: center;border-radius: 8rpx;background: #c3ab7c;
			&:active {opacity: .88;}
		}
		.S_bbBtn2 {background: #333;}
	}
}
.yprice{
		    border: 1px #E9423E solid;
		    display: inline-block;
		    font-size: 16rpx;
		    line-height: 30rpx;
		    padding-right: 10rpx;
			    color: #e9423e;
				margin-top: 10rpx;
				border-radius: 3rpx;
		i{
			    display: inline-block;
			    background: #E9423E;
			    color: #fff;
			    font-weight: normal;
			    font-size: 16rpx;
				line-height: 34rpx;
				float: left;
			    padding: 0 10rpx;
			    margin-right: 5rpx;
		}
		text{
			    font-size: 22rpx;
		}
	}
.s_color{
	background: #C3AB7C; display: inline-block; padding: 8rpx 15rpx; font-size: 24rpx; color: #fff; border-radius: 8rpx; position: relative;
 .s_unm {width: 32rpx;height: 32rpx;color: #fff;font-size: 16rpx;border-radius: 50%;background: #e9423e;position: absolute;right: -10rpx;top:-10rpx;display: flex;justify-content: center;align-items: center;}
}	
@keyframes popFocusIn {
	0% {transform: scale3d(0.6, 0.6, 0.6);opacity: .6;}
	80% {transform: scale3d(1.1, 1.1, 1.1);opacity: 1;}
	100% {transform: scale3d(1, 1, 1);opacity: 1;}
}
@keyframes popFocusOut {
	0% {transform: scale3d(1, 1, 1);opacity: 1;}
	20% {transform: scale3d(1.1, 1.1, 1.1);opacity: 1;}
	100% {transform: scale3d(0.6, 0.6, 0.6);opacity: .6;}
}
</style>